<template>
	<view class="container">
		<!-- <view class="w-100" mode="widthFix" style="height: 280px;background-image: url(/static/images/my/my_bg.png);"></view>  -->
		<image class="w-100" src="/static/images/mart/user-bg.jpg" mode="widthFix"></image>
		<view class="content">
			<view class="welcome" @tap="openLoginPopup">
				<view>你好 {{ isLogin ? userInfo.nickName : '立即登录开启你的小镜界' }}</view>
				<view class="font-size-base">小镜界，有境界！</view>
			</view>
			<!-- member card begin -->
			<view class="member-card">
				<view class="info">
					<view class="title">
						<view class="wenyue-font">会员</view>
						<!-- 				 @tap="openBenefits"		<view class="tips" @tap="openMember">
							<view>成为会员享双倍积分</view>
							<image src="/static/images/my/icon_arrow.png"></image>
						</view> -->
					</view>
					<image @tap="togoPage('/pages/my/info')" :src="isLogin?userInfo.avatarUrl:'/static/images/my/touxiang.png'" class="avatar"></image>
					<view class="badage">
						Lv1
					</view>
				</view>
				<view class="row">
					<navigator class="grid" open-type="navigate" url="/pages/integrals/mall">
						<image src="/static/images/my/me_icon_points.png"></image>
						<view class="value">0</view>
						<view class="title">积分商城</view>
					</navigator>
					<view class="grid" hover-class="opacity-6" @click="showMessage('您目前没有小镜券！')">
						<image src="/static/images/my/me_icon_quan.png"></image>
						<view class="value">0</view>
						<view class="title">小镜劵</view>
					</view>
					<navigator class="grid" open-type="navigate" url="/pages/my/wallet">
						<image src="/static/images/my/me_icon_wallet.png"></image>
						<view class="value">0.00</view>
						<view class="title">钱包</view>
					</navigator>
					<view class="grid" open-type="navigate"  @click="showMessage('您目前没有小镜有礼卡！')">
						<image src="/static/images/my/me_icon_gift_card.png"></image>
						<view class="value">0</view>
						<view class="title">小镜有礼</view>
					</view>
				</view>
			</view>
			<!-- member card end -->
			<!-- 小镜界播报 begin -->
			<view class="xinqiubobao">
				<view class="header">
					<view class="title">小镜界播报</view>
					<view class="subtitle" @tap="togoPage('/pages/my/components/boardcast/boardcast')">更多</view>
				</view>

				<swiper class="swiper" next-margin="50px" autoplay :interval="5000" :duration="500" circular>
					<swiper-item class="swiper-item" v-for="(item, index) in boardcast" :key="index" @click="toWxActicale(item.BrdcRedirectContent)">
						<view class="swiper-item-wrapper">
							<image :src="item.BrdcCoverPic" class="img"></image>
							<view class="desc">
								<view class="title">{{ item.BrdcTitle }}</view>
								<view class="subtitle">{{ item.BrdcSubtitle }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 星球播报 end -->
			<!-- 任务中心 begin -->
			<!-- 			<view class="task-center" @tap="taskCenter">
				<view class="intro">
					<view class="title">任务中心</view>
					<view class="subtitle">MISSION CENTER</view>
				</view>
				<view class="image-wrapper">
					<image src="/static/images/my/b3d3a98e3c7f450aaa32fbec6aecdfaf.png"></image>
				</view>
			</view> -->
			<!-- 任务中心 end -->
		</view>
		<!-- 开通礼包 begin -->
		<!-- 		<view class="open-gift">
			<view class="header">
				<view class="title">开通礼包</view>
				<view class="subtitle" @tap="openMember">更多</view>
			</view>
			<view class="row">
				<view class="grid" @tap="openMember">
					<image src="/static/images/my/member_benefits/me_rights_icon_free.png"></image>
					<view class="title">
						<view>星球赠饮券</view>
						<view class="number">x1</view>
					</view>
				</view>
				<view class="grid" @tap="openMember">
					<image src="/static/images/my/member_benefits/me_rights_icon_1jia1.png"></image>
					<view class="title">
						<view>买一赠一券</view>
						<view class="number">x1</view>
					</view>
				</view>
				<view class="grid" @tap="openMember">
					<image src="/static/images/my/member_benefits/me_rights_icon_2jia1.png"></image>
					<view class="title">
						<view>买二赠一券</view>
						<view class="number">x2</view>
					</view>
				</view>
				<view class="grid" @tap="openMember">
					<image src="/static/images/my/member_benefits/me_rights_icon_qingshi.png"></image>
					<view class="title">
						<view>喜茶轻食券</view>
						<view class="number">x2</view>
					</view>
				</view>
				<view class="grid" @tap="openMember">
					<image src="/static/images/my/member_benefits/me_rights_icon_youxian_new.png"></image>
					<view class="title">
						<view>优先券</view>
						<view class="number">x2</view>
					</view>
				</view>
				<view class="grid" @tap="openMember">
					<image src="/static/images/my/member_benefits/me_rights_icon_waimai_new.png"></image>
					<view class="title">
						<view>免运费券</view>
						<view class="number">x2</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 开通礼包 end -->

		<list-cell hover arrow @click="togoPage('/pages/my/code')">
			<view class="list-cell-wrapper">
				<view view="title">会员码</view>
				<view class="subtitle">门店扫码积分、小镜界钱包和小镜界有礼卡支持</view>
			</view>
		</list-cell>
		<list-cell hover arrow   @click="togoPage('/pages/addresses/addresses')">
			<view class="list-cell-wrapper">
				<view view="title">收货地址</view>
			</view>
		</list-cell>
		<!-- 		<list-cell hover arrow>
			<view class="list-cell-wrapper">
				<view view="title">星球封面</view>
			</view>
		</list-cell> -->
		<list-cell hover arrow>
			<view class="list-cell-wrapper">
				<!-- 	<view view="title">联系客服</view> -->
				<button view="title" open-type="contact" class="kefu">联系客服</button>
			</view>
		</list-cell>
		<list-cell hover arrow>
			<view class="list-cell-wrapper" @click="messagesCenter()">
				<view view="title">消息中心</view>
				<view class="subtitle" style="color:#DBA871;">{{noRead}}</view>
			</view>
		</list-cell>
		<list-cell hover arrow last>
			<view class="list-cell-wrapper" @click="togoPage('/pages/my/components/more/more')">
				<view view="title">更多</view>
			</view>
		</list-cell>
		<!-- 登录popup -->
		<login-popup ref="loginPopup"></login-popup>
	</view>
</template>

<script>
	import listCell from '@/components/list-cell/list-cell.vue'
	import loginPopup from './components/login-popup.vue'
	import {
		mapState
	} from 'vuex'

	export default {
		components: {
			listCell,
			loginPopup
		},
		data() {
			return {
				noRead: 0,
				boardcast: []
			}
		},
		computed: {
			...mapState(['isLogin', 'userInfo'])
		},
		async onLoad() {
			this.getBoardcast();
			this.getNotice(uni.getStorageSync('WxId'));
		},
		methods: {
			showMessage(msg){
				uni.showToast({
					title: msg,
					duration: 2000,
					mask: false,
					icon: "none"
				})
			},
			toWxActicale(url) {
				//打开微信公众号文章
				//wx.miniProgram.navigateTo({url: url})
				uni.navigateTo({
					url: `/pages/my/components/webView/webView?url=${url}`
				})
			},
			openLoginPopup() {
				if (this.isLogin) {
					return
				}
				this.$refs['loginPopup'].open()
			},
			togoPage(url) {
				uni.navigateTo({
					url: url
				})
			},
			taskCenter() {
				uni.navigateTo({
					url: '/pages/task-center/task-center'
				})
			},
			messagesCenter() {
				uni.navigateTo({
					url: '/pages/my/components/notice/notice?userid=' + uni.getStorageSync('WxId')
				})
			},
			openMember() {
				uni.navigateTo({
					url: '/pages/my/member'
				})
			},
			myCode() {
				uni.navigateTo({
					url: '/pages/my/code'
				})
			},
			openBenefits() {
				if (this.isLogin) {
					uni.navigateTo({
						url: '/pages/my/benefits'
					})
				} else {
					this.$refs['loginPopup'].open()
				}
			},
			//获取 播报数据
			getBoardcast() {
				let that = this;
				let cateOp = {
					url: "api/Lx_Self_Boardcast/UI_GetPageData",
					data: {
						page:1,
						rows:5
					}
				}

				this.$request.Post(cateOp, (ret) => {
					if (ret.rows.length > 0) {
						that.boardcast = ret.rows;
						that.boardcast.map(n => {
							n.BrdcCoverPic = that.$request.setImgUrl(n.BrdcCoverPic);
							return n;
						});
					}
				});
			},
			//获取数据
			getNotice(userid) {
				let that = this;
				let whe = [];
				whe.push({
					"name": "NoticeViewUserId",
					"value": userid,
					"displayType": '='
				});
				let cateOp = {
					url: "api/Lx_Self_Notice/UI_GetPageData",
					data: {
						"page": 1,
						"rows": 20,
						"sort": "CreateDate",
						"order": "desc",
						"wheres": JSON.stringify(whe)
					}
				}

				this.$request.Post(cateOp, (ret) => {
					if (ret.rows.length > 0) {
						this.scores = ret.rows;
						let noReadList = this.scores.filter(e => {
							return e.NoticeIsRead != 1
						});
						this.noRead = noReadList.length;
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		height: auto;
		min-height: 100%;
	}

	/* #endif */

	.content {
		padding: 0 30rpx;
		position: relative;
		// z-index: 100000;
	}

	.welcome {
		position: relative;
		margin-top: -136rpx;
		display: flex;
		flex-direction: column;
		font-size: $font-size-lg;
		color: $text-color-warning;
	}

	.member-card {
		background-color: $bg-color-white;
		padding: 20rpx;
		display: flex;
		flex-direction: column;
		border-radius: $border-radius-base;
		margin-bottom: 40rpx;

		.info {
			position: relative;
			margin-top: -50rpx;
			display: flex;
			align-items: center;
			position: relative;
			padding: 20rpx 0;
			border-bottom: 1rpx solid rgba($color: $border-color, $alpha: 0.3);

			.title {
				flex: 1;
				font-size: 40rpx;
				color: $text-color-base;
				display: flex;
				align-items: center;

				.tips {
					margin-left: 10rpx;
					font-size: $font-size-sm;
					color: $text-color-assist;
					background-color: #e9e9e9;
					padding: 10rpx 30rpx;
					border-radius: 50rem !important;
					display: flex;
					align-items: center;

					image {
						width: 20rpx;
						height: 20rpx;
					}
				}
			}

			.avatar {
				width: 150rpx;
				height: 150rpx;
				border-radius: 100%;
			}

			.badage {
				font-family: 'neutra';
				position: absolute;
				bottom: 20rpx;
				left: 0;
				border: 2rpx solid $text-color-base;
				padding: 2rpx 20rpx;
				border-radius: $border-radius-lg;
				font-size: $font-size-base;
			}
		}

		.row {
			margin-top: $spacing-row-base;
			width: 100%;
			display: flex;
			align-items: center;

			.grid {
				flex: 1;
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				.value {
					font-family: 'neutra';
					margin-bottom: $spacing-col-sm;
					font-size: $font-size-lg;
				}

				.title {
					font-size: $font-size-sm;
					color: $text-color-grey;
				}
			}
		}
	}

	.xinqiubobao {
		width: 100%;
		position: relative;
		
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
		
			.title {
				font-size: $font-size-lg;
				font-weight: 500;
			}
		
			.subtitle {
				font-size: $font-size-base;
				color: $text-color-grey;
			}
		}

		// .title {
		// 	margin: 10rpx 0;
		// 	font-size: $font-size-lg;
		// 	font-weight: 500;
		// }
		
		// .subtitle{
		// 	font-family: 'neutra';
		// 	font-size: $font-size-sm;
		// }

		.swiper {
			height: 200rpx;
			margin-bottom: 10rpx;

			.swiper-item {

				.swiper-item-wrapper {
					display: flex;
					background-color: $bg-color-white;
					padding: 40rpx 60rpx;
					border-radius: $border-radius-base;
					align-items: center;
					margin-right: 40rpx;

					image {
						width: 100rpx;
						height: 100rpx;
						border-radius: 100%;
						margin-right: 20rpx;
					}

					.desc {
						display: flex;
						flex-direction: column;

						.title {
							font-size: $font-size-medium;
							font-weight: 500;
							margin-bottom: 10rpx;
						}

						.desc {
							font-size: $font-size-sm;
							color: $text-color-grey;
						}
					}
				}
			}
		}
	}

	.task-center {
		margin: 40rpx 0;
		background-color: $bg-color-white;
		padding: 10rpx 0;
		display: flex;
		align-items: center;
		border-radius: $border-radius-lg;

		.intro {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.title {
				font-size: $font-size-lg;
				color: $text-color-base;
			}

			.subtitle {
				font-family: 'neutra';
				font-size: $font-size-sm;
			}
		}

		.image-wrapper {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 200rpx;
				height: 200rpx;
			}
		}
	}

	.open-gift {
		width: 100%;
		background-color: $bg-color-white;
		padding: 30rpx 40rpx;
		margin-bottom: 20rpx;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;

			.title {
				font-size: $font-size-lg;
				font-weight: 500;
			}

			.subtitle {
				font-size: $font-size-base;
				color: $text-color-grey;
			}
		}

		.row {
			display: flex;
			flex-wrap: wrap;

			.grid {
				width: 33.3333%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 20rpx;

				image {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: $spacing-row-base;
				}

				.title {
					font-size: $font-size-base;
					color: $text-color-base;
					display: flex;
					align-items: baseline;

					.number {
						margin-left: 5rpx;
						font-family: 'neutra';
						color: $color-warning;
					}
				}
			}
		}
	}

	.list-cell-wrapper {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			font-size: $font-size-lg;
		}

		.subtitle {
			font-size: $font-size-sm;
			color: $text-color-assist;
		}

		.kefu {
			width: 100%;
			text-align: left;
			padding: 0;
			height: 16px;
			line-height: 16px;
			font-size: 15px;
			color: rgb(52, 52, 52);
			background-color: #ffffff;
		}
	}
</style>
